<script setup>
// import { reactive } from 'vue'
// const state = reactive({
//   msg:'this is msg'
// })
// const setSate = ()=>{
//    // 修改数据更新视图
//    state.msg = 'this is new msg'
//  }

import { ref,computed,watch } from 'vue';
const count = ref(0)
const setCount = ()=>{
  count.value++
 }
 //计算属性
 const doubleCount = computed(()=>count.value*2)

 //原始数据
 const list = ref([1,2,3,4,5,7,8])
 // 计算属性list
const filterList = computed(()=>list.value.filter(item=>item>2))

watch(count,(value,oldValue)=>console.log(value,oldValue),{
  immediate:true
})

//深度监听
const obj = ref({
  name:'zhangsan',
  age:18
})
const changeNickname=()=>{
  obj.value.name = 'lisi'
}
watch(obj,(value,oldValue)=>{
  console.log(oldValue.name)
},{
  deep:true
})
</script>

<template>
  <!-- <div>{{state.msg}}</div>
  <button @click="setSate">chanage msg</button> -->
  <button @click="setCount">{{count}}</button>
  <div>{{doubleCount}}</div>
  <br>
  <div>{{ filterList }}</div>
  <br>
  <div>{{obj.name}}</div>
  <button @click="changeNickname">lisi</button>
</template>

<style scoped>

</style>
